<style>
    #standard-detail-add {
        padding: 25px 25px 25px 25px;
    }
    .styleCenter {
        margin:auto;
        width: 80%;
    }
</style>
<div class="layui-fluid" id="standard-detail-add" style="overflow-y:auto">
    <form class="layui-form" id="standard-detail-add-form" lay-filter="standard-detail-add-form">
        <div class="layui-form-item ">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label website-form-item-require">指标名称：</label>
                    <!--隐藏数据-->
                    <input type="hidden" id="hiddenDate">
                    <div class="layui-input-block">
                        <input type="text" name="name" minlength="2" maxlength="10" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label website-form-item-require">权重值：</label>
                    <div class="layui-input-block">
                        <input type="number" name="weight" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <label class="layui-form-label website-form-item-require">指标内容：</label>
                    <div class="layui-input-block">
                        <textarea  name="description" lay-verify="required" placeholder="请输入内容" rows="3" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-card">
        <div class="layui-card-body styleCenter">
        <table border="3px" class="layui-table">
            <tr>
                <td style="text-align: center">操作按钮</td>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-input-inline" style="width: 40px;">
                                <button id="add-question-btn" type="button"
                                        class="layui-btn layui-btn-sm layui-btn-radius"
                                        onclick="addQuestion(this)">
                                    <i class="layui-icon"></i>新增
                                </button>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline" style="width: 40px;">
                                <button id="del-question-btn_0" type="button"
                                        class="layui-btn layui-btn-sm layui-btn-radius"
                                        onclick="checkDelQuestion(this)">
                                    <i class="layui-icon"></i>删除
                                </button>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: right">级别<span style="color: red">*</span></td>
                <td>
                    <div class="layui-form-item">
                        <input id="indicatorType_0" name="indicatorType" disabled lay-verify="required" type="text" value="A级" class="layui-input" />
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: right">最大分数<span style="color: red">*</span></td>
                <td>
                    <div class="layui-form-item">
                        <input id="maxScore_0" name="maxScore" type="number" onkeyup="value=value.replace(/[^\d]/g,'')" lay-verify="required" class="layui-input"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: right">最小分数<span style="color: red">*</span></td>
                <td>
                    <div class="layui-form-item">
                        <input id="minScore_0" name="minScore" type="number" onkeyup="value=value.replace(/[^\d]/g,'')" lay-verify="required" class="layui-input"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: right">描述<span style="color: red">*</span></td>
                <td>
                    <div class="layui-form-item">
                        <textarea id="questionDescription_0" name="questionDescription" lay-verify="required" placeholder="请输入内容" rows="5" class="layui-textarea"></textarea>
                    </div>
                </td>
            </tr>
        </table>
        </div>
        </div>
        <div class="layui-form-item website-hide">
            <button class="layui-btn" lay-submit="" lay-filter="expert-detail-add-form-submit" id="submit"></button>
        </div>
    </form>
</div>

<script>
    layui.use(['website', 'form', 'validate'], function () {
        var $ = layui.$,
            website = layui.website,
            layer = layui.layer,
            form = layui.form,
            $view = $('#standard-detail-add'),
            validate = layui.validate;
        var indicatorTypeStrArr =[],
            questionDescriptionStrArr=[],
            maxScoreStrArr=[],
            minScoreStrArr=[]
        ;
        form.verify(validate);
        form.render();
        form.on('submit(expert-detail-add-form-submit)', function (data) {
            getQuestionArrayData();
            data.field.indicatorTypeStrArr=indicatorTypeStrArr;
            data.field.questionDescriptionStrArr=questionDescriptionStrArr;
            data.field.maxScoreStrArr=maxScoreStrArr;
            data.field.minScoreStrArr=minScoreStrArr;

            data.field.indicatorType=null;
            data.field.questionDescription=null;
            data.field.maxScore=null;
            data.field.minScore=null;
            var str = data.field;
            var strJson = JSON.stringify(str);
            $("#hiddenDate").val(strJson)
            return false;
        });

        // 新增方法
        window.addQuestion = function(obj) {
           var num= $("input[name='indicatorType']");
           if(num.length>=7){
               layer.alert('最多添加七条数据！');
               return false;
            }
            var table = $(obj).parent().parent().parent().parent().parent().parent();
            var newTable = table.clone();
            // 清空新table
            newTable.find(":input").each(function(){
                $(this).val("");
            });
            table.after(newTable);
            // 遍历html中该name值的所有input标签，并设置标签的id属性值
            $("input[name='indicatorType']").each(function (i) {
                $(this).attr("id","indicatorType_"+i);
                if(i==0){
                 $(this).val("A级");
                }else if(i==1){
                    $(this).val("B级");
                }else if(i==2){
                    $(this).val("C级");
                }else if(i==3){
                    $(this).val("D级");
                }else if(i==4){
                    $(this).val("E级");
                }else if(i==5){
                    $(this).val("F级");
                }else if(i==6){
                    $(this).val("G级");
                }
            });
            $("textarea[name='questionDescription']").each(function (i) {
                $(this).attr("id","questionDescription_"+i);
            });
            $("input[name='maxScore']").each(function (i) {
                $(this).attr("id","maxScore_"+i);
            });
            $("input[name='minScore']").each(function (i) {
                $(this).attr("id","minScore_"+i);
            });
            $("button[id='del-question-btn_0']").each(function (i) {
                $(this).attr("id","del-question-btn_"+i);
            });

        }

// 删除方法
        window.checkDelQuestion= function(obj) {
            var arr = obj.id.split("_");
            if(arr[1] == 0){
                layer.alert("该行已是第一行，无法删除！")
                return false;
            }else{
                $(obj).parent().parent().parent().parent().parent().parent().remove();
                // 删除后重新遍历，给html的input的id属性赋值
                $("input[name='indicatorType']").each(function (i) {
                    $(this).attr("id","indicatorType_"+i);
                    if(i==0){
                        $(this).val("A级");
                    }else if(i==1){
                        $(this).val("B级");
                    }else if(i==2){
                        $(this).val("C级");
                    }else if(i==3){
                        $(this).val("D级");
                    }else if(i==4){
                        $(this).val("E级");
                    }else if(i==5){
                        $(this).val("F级");
                    }else if(i==6){
                        $(this).val("G级");
                    }else if(i==7){
                        $(this).val("H级");
                    }

                });
                $("textarea[name='questionDescription']").each(function (i) {
                    $(this).attr("id","questionDescription_"+i);
                });
                $("input[name='maxScore']").each(function (i) {
                    $(this).attr("id","maxScore_"+i);
                });
                $("input[name='minScore']").each(function (i) {
                    $(this).attr("id","minScore_"+i);
                });
                $("button[id='del-question-btn_0']").each(function (i) {
                    $(this).attr("id","del-question-btn_"+i);
                });
                layer.alert("删除成功！")
            }
        }
        // 遍历获取多个table中的值
        window.getQuestionArrayData= function() {
         $("input[name='indicatorType']").each(function () {
             indicatorTypeStrArr.push($(this).val());
          });
          $("textarea[name='questionDescription']").each(function () {
              questionDescriptionStrArr.push($(this).val());
          });
          $("input[name='maxScore']").each(function () {
              maxScoreStrArr.push($(this).val());
          });
         $("input[name='minScore']").each(function () {
              minScoreStrArr.push($(this).val());
          });

        }

    });
</script>